<template>
    <section>
        <div class="wrapper">
            <h2>往期活动回顾</h2>
            <ul>
              <li @click="$troute.query('maList',item);" v-for="(item,index) in titles" :key="index">
                    <div>
                        <img src="@/mobile/imgs/activity-2.png" :alt="item.activityTypename">
                        <h3>{{ item.activityTypename }}</h3>
                    </div>
              </li>

            </ul>
        </div>
    </section>
</template>
<script>
import api from "@/data/api/index.js";
export default {
    data(){
        return{
            titles:[],
        }
    },
    mounted(){
      api.getActivityType().then(res=>{
        this.titles = res
      })
    }
}
</script>
<style lang="scss" scoped>
section{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%;
}
.wrapper{
    padding: 25px 20px;
    h2{
        position: relative;
        display: inline-block;
        font-size: 24px;
        margin-bottom: 25px;
        z-index: 1;
        &::after{
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 1px;
            height: 5px;
            background-color: #C9151E;
            z-index: -1;
        }
    }
    ul{
        margin: 0 -10px;
        overflow: hidden;
    }
    ul li{
        float: left;
        width: 50%;
        margin-top: 20px;
        padding: 0 10px;
        color: #fff;
        text-align: center;
        box-sizing: border-box;
        div{
            padding: 40px 0;
            background: #E9C5BA url(../imgs/cloud.png) no-repeat center bottom;
            background-size: contain;
            border-radius: 5px;
            overflow: hidden;
            img{
                height: 45px;
            }
            h3{
                margin-top: 30px;
                font-size: 18px;
            }
        }
        &:first-of-type{
            color: #333;
        }
        &:nth-child(2) div{
            background-color: #9C1017;
        }
        &:nth-child(3) div{
            background-color: #783034;
        }
        &:nth-child(4) div{
            background-color: #C58365;
        }
    }
}
</style>